<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>测量</title>

    <link rel="stylesheet" href="./lib/styles.css" />

    <script type="text/javascript" src="./lib/aircity/ac_conf.js"></script>
    <script type="text/javascript" src="./lib/aircity/ac.min.js"></script>
    <script type="text/javascript" src="./lib/vue3.js"></script>
  </head>
  <body>
    <div id="app">
      <div id="player"></div>

      <div class="measurement">
        <div
          :class="{
                        'measurement-item': true,
                        'measurement-item-active': active == item.index
                    }"
          @click.stop="clickMeasurement(item)"
          v-for="(item) in typeList"
          :key="item.index"
        >
          <img :src="`./lib/images/${item.name}.png`" alt="" />
          {{ item.name }}
        </div>
      </div>

      <div class="measuring-result">
        <GeneralTitle>测量结果</GeneralTitle>

        <div class="tip" v-if="['直线测量', '投影面积', '地表面积'].includes(measureType)">提醒: 右键结束测量</div>

        <div v-if="resultArr.length != 0 && resultArr[0].name === '坐标'" class="category-list">
          <div v-if="resultArr.length != 0">
            <div class="item-zb" v-for="(item, index) in resultArr" :key="index">
              <div class="label">{{ item.name }}</div>
              <div class="value">
                <div class="value-xyz">
                  <div class="value-label">x:</div>
                  {{ item.value[0] }}
                </div>
                <div class="value-xyz">
                  <div class="value-label">y:</div>
                  {{ item.value[1] }}
                </div>
                <div class="value-xyz">
                  <div class="value-label">z:</div>
                  {{ item.value[2] }}
                </div>
              </div>
            </div>
          </div>
        </div>

        <div v-else class="category-list">
          <div v-if="resultArr.length != 0">
            <div class="item" v-for="(item, index) in resultArr" :key="index">
              <div class="label">{{ item.name }}</div>
              <div class="value">{{ item.value }}</div>
            </div>
          </div>
        </div>

        <div class="category-btn">
          <div class="btn-item" @click="cancelMeasurement">取消</div>
        </div>
      </div>
    </div>

    <script type="text/javascript">
      const { createApp, onMounted, ref } = Vue

      const vueComposition = {
        setup() {
          let active = ref(0)

          const resultArr = ref([])
          const typeList = [
            { index: 1, name: '坐标测量' },
            { index: 2, name: '直线测量' },
            { index: 3, name: '水平测量' },
            { index: 4, name: '垂直测量' },
            { index: 5, name: '投影面积' },
            { index: 6, name: '地表面积' }
          ]

          // 点击子功能
          const clickMeasurement = item => {
            resultArr.value.length = 0
            active.value = item.index
            //测量模式配置选项参数
            let options = {
              pointSize: 8.0,
              textSize: 13,
              textColor: [255 / 255, 153 / 255, 0, 1],
              pointColor: [0, 0, 1, 0.3],
              lineColor: [1, 0, 0, 0.8],
              areaColor: [0, 1, 1, 0.2],
              showCoordinateText: true
            }
            __g.tools.setMeasurement(item.index, options)
            //开始测量 注意：5.3支持右键结束交互
            __g.tools.startMeasurement()
          }

          const cancelMeasurement = () => {
            active.value = 0
            resultArr.value.length = 0
            __g.tools.stopMeasurement()
          }

          onMounted(() => {
            const __DigitalTwinPlayer = new DigitalTwinPlayer(HostConfig.Player, {
              domId: 'player',
              apiOptions: {
                onEvent: function (e) {
                  // 判断是否为测量模式右键结束
                  if (e.eventtype === 'Measurement') {
                    console.log(e, '---Measurement')

                    switch (e.Type) {
                      case 'Coordinate':
                        resultArr.value.push({
                          name: `坐标`,
                          value: e.Coordinate
                        })
                        break
                      case 'Polyline':
                        resultArr.value.push({
                          name: `总长(m)`,
                          value: e.Perimeter
                        })
                        break
                      case 'HorizontalLine':
                        resultArr.value.push({
                          name: `总长(m)`,
                          value: e.Length
                        })
                        break
                      case 'VerticalLine':
                        resultArr.value.push({
                          name: `总长(m)`,
                          value: e.VerticalHeight
                        })
                        break
                      case 'Area':
                        resultArr.value.push(
                          {
                            name: `周长(m)`,
                            value: e.Perimeter
                          },
                          {
                            name: `总面积(m²)`,
                            value: e.Area
                          }
                        )
                        break
                      case 'TerrainArea':
                        resultArr.value.push({
                          name: `总面积(m²)`,
                          value: e.Area
                        })
                        break

                      default:
                        break
                    }
                  }
                }
              }
            })
          })

          return {
            typeList,
            clickMeasurement,
            active,
            resultArr,
            cancelMeasurement
          }
        }
      }

      const app = createApp(vueComposition).mount('#app')

      const onResize = async () => {
        let playerView = document.getElementById('player')
        playerView.style.height = window.innerHeight + 'px'
        playerView.style.width = window.innerWidth + 'px'
      }

      window.addEventListener('resize', onResize, true)
    </script>
  </body>
</html>
